<template>
  <div class="box">
    <div class="form">
      <a-row>
        <a-form @finish="btnSubmit" :model="formState" v-bind="layout">
          <a-col>
            <div class="Personal">个人基础设置</div>
          </a-col>
          <a-col>
            <a-form-item label="手机号">
              <a-input
                v-model:value="formState.numberPhone"
                style="width: 480px"
                :disabled="true"
              >
                <template #prefix> + </template>
              </a-input>
            </a-form-item>
            <div class="btnPhone">
              <a-button type="primary" @click="btnPhone"
                >修改手机号/密码</a-button
              >
            </div>
            <a-form-item label="真实姓名">
              <a-input
                v-model:value="saveInfore.realname"
                style="width: 600px"
                :disabled="!formState.changeRealName"
              />
            </a-form-item>
            <a-form-item label="工作电话">
              <a-input
                v-model:value="saveInfore.work_phone"
                style="width: 600px"
                placeholder="请输入工作电话"
              />
            </a-form-item>
            <a-form-item label="入职时间">
              <a-input
                v-model:value="formState.induction_time"
                style="width: 600px"
                :disabled="true"
              />
            </a-form-item>
            <a-form-item label="职位">
              <a-input
                v-model:value="formState.position"
                style="width: 600px"
                :disabled="true"
              />
            </a-form-item>
            <a-form-item label="工号">
              <a-input
                v-model:value="formState.job_number"
                style="width: 600px"
                :disabled="true"
              />
            </a-form-item>
            <a-form-item label="头像">
              <a-upload
                :action="imgAction"
                :headers="{ 'org-token': $store.getters.token }"
                :multiple="false"
                v-model:file-list="fileList"
                @change="handleUploadChange"
                name="image"
                :data="{ dir: 'org_personal' }"
                accept="image/jpg,image/jpeg,image/gif,image/png"
                list-type="picture-card"
              >
                <div v-if="fileList.length < 1">
                  <PlusOutlined />
                  <div style="padding-top: 4px">上传</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
          <a-form-item>
            <a-button type="primary" class="preservation" html-type="submit"
              >保存</a-button
            >
          </a-form-item>
        </a-form>
      </a-row>
    </div>
    <!-- 验证手机号 -->
    <layer
      :visible="visibleBtn"
      @close="closeLayer"
      :phone="phoneNumber"
      :myUrl="urlHttp"
    />
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from "vue";
import request from "../../../common/utils/request";
import layer from "./modules/layer.vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import store from "../../../store";

export default defineComponent({
  components: { layer, PlusOutlined },
  name: "personalInfo",
  setup() {
    const saveInfore = reactive({
      realname: "", //真实姓名
      avatar: "",
    });
    const formState = reactive({
      induction_time: "", //入职时间
      job_number: "", //工作编号
      position: "", //职位
      numberPhone: "",
      changeRealName: true, //是否可以修改真实姓名
    });
    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };

    const visibleBtn = ref(false);
    const closeLayer = () => {
      visibleBtn.value = false;
    };

    const btnPhone = () => {
      visibleBtn.value = true;
    };

    let detail = {};
    const phoneNumber = ref();
    const urlHttp = ref("");
    let url = "";
    const personalList = () => {
      request.get("/org", "/user/getInfo").then((res) => {
        console.log(res);
        console.log(res.url.myUrl);
        url = res.url;
        urlHttp.value = url.myUrl;
        detail = res.orgUser;
        personalState(detail);
        formState.numberPhone = res.user.phone_country + res.user.phone;
        phoneNumber.value = res.user.phone_country + res.user.phone;
        saveInfore.realname = res.orgUser.realname;
        formState.changeRealName = res.changeRealName;
        saveInfore.work_phone = res.orgUser.work_phone;
        fileList.value = [];
        if (res.orgUser && res.orgUser.avatar) {
          fileList.value = [
            {
              uid: "1",
              name: res.orgUser.avatar,
              status: "done",
              url: res.orgUser.avatar,
            },
          ];
        }
      });
    };
    personalList();

    const personalState = (state) => {
      for (let key in state) {
        formState[key] = state[key];
      }
    };

    // 修改图片
    const beforeUpload = (file) => {
      return new Promise((resolve, reject) => {
        const isAccept = [
          "image/jpeg",
          "image/png",
          "image/jpg",
          "image/gif",
        ].includes(file.type);
        if (!isAccept) {
          message.error("只能上传png，gif，jpeg，jpg格式的图片！");
          reject();
        }
        resolve();
      });
    };

    const fileList = ref([]);

    // const changeImg = (info) => {
    //   console.log(info);
    //   let resFileList = [...info.fileList];
    //   if (resFileList.length) {
    //     console.log(resFileList);
    // resFileList = resFileList.slice(-1);
    // resFileList = resFileList.map((file) => {
    //   if (file.response) {
    //     console.log(file.response);
    //     file.url = file.response.data.fileUrl;
    //     saveInfore.avatar = file.url;
    //   }
    //   return file;
    // });
    //   } else {
    //     saveInfore.avatar = "";
    //   }
    //   fileList.value = resFileList;
    // };

    // 添加图片
    // const fileList = ref([]);
    let images = "";
    const handleUploadChange = (info) => {
      let resFileList = [...info.fileList];
      if (resFileList.length) {
        resFileList = resFileList.slice(-1);
        resFileList = resFileList.map((file) => {
          if (file.response) {
            if (file.response.code == 1000) {
              file.url = file.response.data.fileUrl;
              images = file.url;
            } else {
              message.warning(file.response.msg);
            }
          }
          return file;
        });
      } else {
        images = "";
      }
      fileList.value = resFileList;
    };

    // 提交
    const btnSubmit = () => {
      if (saveInfore.realname == "") {
        message.warning("请输入真实姓名");
        return;
      }
      saveInfore.avatar = images;
      request.put("/org", "/user/saveInfo", saveInfore).then((res) => {
        message.success("保存成功");
      });
    };

    return {
      formState,
      visibleBtn,
      btnPhone,
      closeLayer,
      btnSubmit,
      phoneNumber,
      urlHttp,
      layout,
      fileList,
      saveInfore,
      beforeUpload,
      handleUploadChange,
      imgAction: request.BASE_URL + "/public/system/uploadImage",
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  background-color: #fff;
  min-height: 100%;
  .Personal {
    height: 72px;
    line-height: 72px;
    font-size: 18px;
    font-weight: 600;
    padding-left: 20px;
  }
  .form {
    margin-left: 100px;
  }
  .btnPhone {
    position: absolute;
    left: 720px;
    top: 0px;
  }
  .preservation {
    position: absolute;
    top: 20px;
    left: 225px;
  }
  .head {
    display: inline-block;
    width: 100px;
    height: 100px;
    display: inline-block;
    border-radius: 5px;
    background-color: skyblue;
  }
  :deep(.ant-input-affix-wrapper .ant-input-prefix) {
    margin-right: 1px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
}
</style>
